<template>
  <div class="my">
    <div class="top">
      <div class="header">
        <div class="message">
            <router-link to="/message">
          <img src="../assets/xiaoxi.png" alt />
            </router-link>
        </div>
        <div class="setting">
          <img src="../assets/setting.png" alt />
        </div>
      </div>
      <div class="middle">
        <div class="left">
          <img src="../assets/user.png" alt />
        </div>
        <div class="mid">
          <div class="mid-top">
            <router-link to="/login">
              <span>立即登录</span>
            </router-link>
          </div>
          <div class="bottom">
            <span>提高正确率，同步答题数据</span>
          </div>
        </div>
        <div class="right">
          <img src="../assets/VIP.png" alt />
        </div>
      </div>
      <div class="under">
        <p>
          <span>开通会员</span>
        </p>
      </div>
    </div>

    <div class="data">
      <div class="data-left">
        <p>0</p>
        <p>所有已做题</p>
      </div>
      <div class="data-right">
        <p>0</p>
        <p>模拟考次数</p>
      </div>
    </div>

    <div class="my-tool">
      <div class="tool-top">
        <span>我的工具</span>
      </div>
      <div class="tool-box">
        <ul>
          <li v-for="item in tool" :key="item.id">
            <div class="img-icon">
              <img :src="require(`../assets/${item.src}`)" alt />
            </div>
            <p>{{item.text}}</p>
          </li>
          
        </ul>
      </div>
    </div>
    <div class="box"></div>
    <bottom></bottom>
  </div>
</template>
<script>
import Bottom from "@/components/Bottom.vue";

export default {
  name: "My",
  data() {
    return {
        tool: [
            { src:"zuanshi2.png", text:"VIP专属方案",id:"01"},
            { src:"shoucang.png", text:"收藏·错题",  id:"02"},
            { src:"message.png",  text:"答题信息",   id:"03"},
            { src:"buchang.png",  text:"补偿申请",   id:"04"},
            { src:"kefu.png",     text:"我的客服",   id:"05"}
        ]
    }
  },
  components: {
    Bottom
  },
  
};
</script>
<style lang="scss" scoped>
.my {
  width: 100%;
  background-color: #ccc !important;
  .top {
    width: 100%;
    height: 200px;
    background-color: #252531;
    .header {
      width: 100%;
      height: 40px;
      // background-color: red;
      display: flex;
      justify-content: flex-end;
      text-align: center;
      .message,
      .setting {
        width: 50px;
        height: 100%;
        line-height: 40px;
      }

      img {
        width: 25px;
        height: 25px;
        vertical-align: middle;
      }
    }
    .middle {
      width: 100%;
      height: 100px;
      //   background-color: green;
      display: flex;
      .left {
        flex-basis: 20%;
        height: 100%;
        line-height: 100px;
        margin-left: 10px;
        img {
          width: 70px;
          height: 70px;
          vertical-align: middle;
        }
      }
      .mid {
        flex-basis: 55%;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        line-height: 200%;
        color: #fff;
        .mid-top {
          font-size: 24px;
          a {
            color: #fff;
          }
        }
        .bottom {
          font-size: 14px;
        }
      }
      .right {
        flex-basis: 25%;
        height: 100%;
        line-height: 100px;
        img {
          width: 70px;
          height: 70px;
          vertical-align: middle;
          transform: rotate(320deg);
        }
      }
    }
    .under {
      width: 100%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      p {
        width: 90%;
        height: 50px;
        background-color: rgba(204, 204, 204, 0.3);
        border-radius: 30px;
        line-height: 50px;
        margin: 0 auto;
        span {
          color: #70451b;
          background-color: #dca051;
          padding: 5px 20px;
          border-radius: 20px;
        }
      }
    }
  }
  .data {
    width: 100%;
    height: 150px;
    background-color: #fff;
    display: flex;

    .data-left,
    .data-right {
      flex-grow: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 200%;
      p:nth-child(1) {
        font-size: 28px;
        font-weight: 600;
      }
      p:nth-child(2) {
        font-size: 16px;
        font-weight: 600;
      }
    }
    .data-left {
      border-right: 1px solid #ccc;
    }
  }
  .my-tool {
    width: 100%;
    height: 250px;
    margin-top: 20px;
    background-color: #fff;
    .tool-top {
      width: 100%;
      height: 50px;
      // background-color: green;
      line-height: 50px;
      span {
        padding-left: 15px;
        font-size: 24px;
      }
    }
    .tool-box {
      width: 100%;
      height: 200px;
      ul {
        width: 100%;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        li {
          flex-basis: 25%;
          width: 100%;
          height: 100px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
          .img-icon {
            margin: 0 auto;
            width: 50px;
            height: 50px;
            line-height: 50px;
            img {
              width: 40px;
              height: 40px;
              vertical-align: middle;
            }
          }
          p {
            font-size: 14px;
            margin-left: 10px;
            font-weight: 600;
          }
        }
      }
    }
  }
  .box {
    width: 100%;
    height: 100px;
    background-color: #fff;
  }
}
</style>

